<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body>
	<div class="layui-fluid">
		<hr class="layui-bg-gray">
		<div class="layui-inline">
			<div class="layui-input-inline">
				<input class="layui-input" name="username" placeholder="请输入用户名" autocomplete="off" />
			</div>
			<button class="layui-btn layui-btn-normal" id="search" data-type="reload">搜索</button>
		</div>
		<table id="online-table" lay-filter="online-table"></table>
	</div>
	<!-- 操作列 -->
	<script type="text/html" id="online-state">
     <div class="layui-btn-group">
        <button shiro:hasPermission="sys:online:forceLogout"  class="layui-btn layui-btn-sm" lay-event="del"><i class="layui-icon layui-icon-delete"></i></button>
    </div>
    </script>
	<div th:include="include::footer"></div>
	<script>
		layui.use([ 'table' ], function() {
			var $ = layui.jquery;
			var table = layui.table;
			// 渲染表格
			var renderTable = function() {
				layer.load(2);
				table.render({
					elem : '#online-table',
					url : '/sys/online/list',
					page : false,
					id : 'onlineReload',
					parseData : chaoLayuiTable.parseData,
					request : chaoLayuiTable.request,
					response : chaoLayuiTable.response,
					//limit : 1,
					cols : [ [ {
						type : 'numbers',
						title : '序号'
					}, {
						field : 'username',
						align : 'center',
						title : '用户名'
					}, {
						field : 'host',
						align : 'center',
						title : '主机'
					}, {
						field : 'startTimestamp',
						title : '登录时间',
						align : 'center',
					}, {
						field : 'lastAccessTime',
						align : 'center',
						title : '最后访问时间'
					}, {
						field : 'timeout',
						align : 'center',
						title : '过期时间'
					}, {
						field : 'status',
						align : 'center',
						title : '状态',
						templet : function(d) {
							if (d.status == 'on_line') {
								return '<span class="layui-badge layui-bg-green">在线</span>';
							} else if (d.status == 'off_line') {
								return '<span class="layui-badge layui-bg-red">离线</span>';
							}
						},
					}, {
						title : '操作',
						toolbar : '#online-state',
						align : 'center'
					} ] ],
					done : function() {
						layer.closeAll('loading');
					}
				});

			};
			
		renderTable();
			// 搜索 
			var active = {
				reload : function() {
					//执行重载
					table.reload('onlineReload', {
						/* page : {
							curr : 1
						//重新从第 1 页开始
						}, */
						where : {
							username : $('[name=username]').val()

						}
					});
				}
			};

			$('#search').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			//监听工具条
			table.on('tool(online-table)', function(obj) {
				var data = obj.data;
				console.log(data)
				var layEvent = obj.event;
				if (layEvent === 'del') {//删除
					remove(data.id, data.username);
				}
			});

			var username = '[[${username}]]';
			console.log(username);

			function remove(id, user) {
				layer.confirm('确定要强制选中用户下线吗？', {
					btn : [ '确定', '取消' ]
				}, function() {
					$.ajax({
						url : "/sys/online/forceLogout/" + id,
						type : "post",
						data : {
							id : id
						},
						success : function(r) {
							if (r.retCode == '0000') {
								//前往登录页面
								if (username == user) {
									top.window.location.href = "/login";
								} else {
									layer.msg(r.retMsg);
									renderTable();
								}
							} else {
								layer.msg(r.retMsg);
							}
						}
					});
				})
			}

		});
	</script>
</body>
</html>